<div id="typo-drop">
	<span id="typo-toggle">F</span>
	
	<div id="typo-selector">
		<h6>Selector</h6>
		<form action="" method="get">
			<ol>
				<li><input type="radio" name="jq-select" checked="checked" id="jq1"><label for="jq1">h1,h2,h3,h4,h5,h6</label></li>
				<li><input type="radio" name="jq-select" id="jq2"><label for="jq2">body</label></li>
				<li><input type="radio" name="jq-select" id="jq3"><label for="jq3">p</label></li>
				<li><input type="radio" name="jq-select" id="jq4"><input type="text" name="typo-blah" value="roll your own" id="typo-blah"></li>
			</ol>
		</form>
		<p>Roll your own selector using <a href="http://docs.jquery.com/Selectors">jQuery selectors</a>.</p>
	</div>
	
	<div id="typo-font-family">
		<h6>Font Family</h6>
		<ul id="typo-font-family-sans" rel="fontFamily">
			<li>Arial</li>
			<li>Verdana</li>
			<li>Tahoma</li>
			<li class="core">Trebuchet MS</li>
			<li>Helvetica</li>			
			<li>Helvetica Neue</li>
			<li>Gill Sans</li>		
			<li>Century Gothic</li>
			<li>Lucida Grande</li>			
			<li>Lucida Sans Unicode</li>
			<li>Calibri</li>
			<li>Corbel</li>
			<li>Candara</li>
			
		</ul>
		<ul id="typo-font-family-serif" rel="fontFamily">
			<li>Times New Roman</li>			
			<li class="core">Georgia</li>
			<li>Times</li>
			<li>Palatino</li>
			<li>Palatino Linotype</li>
			<li>Baskerville</li>
			<li>Hoefler Text</li>
			<li>Garamond</li>
			<li>Constantia</li>
			<li>Cambria</li>
		</ul>
		
	</div>

	<div id="typo-font-variant">
		<h6>Font Variant</h6>
		<ul rel="fontVariant">
			<li>small-caps</li>
			<li>normal</li>
		</ul>		
	</div>
	
	<div id="typo-font-weight">
		<h6>Font Weight</h6>
		<ul rel="fontWeight">
			<li>bold</li>
			<li>normal</li>
		</ul>		
	</div>

	<div id="typo-text-transform">
		<h6>Text Transform</h6>
		<ul rel="textTransform">
			<li>capitalize</li>
			<li>uppercase</li>
			<li>lowercase</li>
			<li>none</li>
		</ul>		
	</div>
	
	<div id="typo-controls">
		<div class="left">&larr;</div>
		<div class="right">&rarr;</div>
		<div class="up">&uarr;</div>
		<div class="down">&darr;</div>
	</div>
	
	<div id="typo-credit"><a href="http://somadesign.ca/projects/typography-tool" title="Soma FontFriend homepage">Soma FontFriend</a></div>
	
</div>